<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue入门 - 数据代理</title>
</head>
<body>
  <div id="container">
  </div>
  <!--
    1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作
    2. 好处: 通过vm对象就可以方便的操作data中的数据
    3. 实现:
      1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性
      2). 所有添加的属性都包含get/set方法
      3). 在get/set方法中去操作data中对应的属性
    -->
  <script src="../../js/compile.js"></script>
  <script src="../../js/mvvm.js"></script>
  <script src="../../js/observer.js"></script>
  <script src="../../js/watcher.js"></script>
  <script>
    const vm = new MVVM({
      el: '#container',
      data: {
        name: 'Miracle'
      }
    });
    console.log(vm.name);  // 读取的是data中的name,  vm代理对data的读操作
    vm.name = 'Miracle He'; // 数据保存到data中的name上, vm代理对data的写操作
    console.log(vm.name, vm._data.name);
  </script>
</body>
</html>

